<script>
import MenuItem from "./MenuItem.vue";

export default {
    name: "NavMenu",
    components: {MenuItem},
    data() {
        return {
            opends:['/system','/feiyu'],
            menuList: [
                {
                    path: '/',
                    icon: 'iconfont icon-home',
                    title: '首页'
                },
                {
                    path: '/system',
                    icon: 'iconfont icon-user',
                    title: '系统管理',
                    children:[
                        {
                            path:'/system/auth',
                            icon:'iconfont icon-user',
                            title: '权限管理'
                        },
                        {
                            path:'/system/menu',
                            icon:'iconfont icon-user',
                            title: '菜单管理'
                        }
                    ]
                },
                {
                    path: '/feiyu',
                    icon: 'iconfont icon-user',
                    title: '飞鱼客栈',
                    children: [
                        {
                            path: '/feiyu/user',
                            icon: 'iconfont icon-user',
                            title: '用户管理',
                        },
                        {
                            path: '/feiyu/res',
                            icon: 'iconfont icon-user',
                            title: '资源管理'
                        },
                        {
                            path: '/feiyu/blog',
                            icon: 'iconfont icon-user',
                            title: '博客管理'
                        },
                        {
                            path: '/feiyu/type',
                            icon: 'iconfont icon-user',
                            title: '分类管理'
                        },
                        {
                            path: '/feiyu/comment',
                            icon: 'iconfont icon-user',
                            title: '评论管理'
                        },
                    ]
                },
                {
                    path: '/setting',
                    icon: 'iconfont icon-user',
                    title: '设置'
                },
            ]
        }
    },
    methods:{
        select(index,indexPath){
            const list=this.breadcrumbList(indexPath)
            this.$emit('changeSelect',list)
        },
        // 获取面包屑数据(将选中菜单的数据进行处理,得到面包屑的数据)
        breadcrumbList (indexBreadcrumbs) {
            let breadcrumbs = []
            let menuList = this.menuList
            indexBreadcrumbs.map(item => {
                for (let i in menuList) {
                    if (item === menuList[i].path) {
                        breadcrumbs.push(menuList[i])
                        if (menuList[i].children) {
                            menuList = menuList[i].children
                        }
                        break;
                    }
                }
            })
            return breadcrumbs;
        },
    }
}
</script>

<template>
    <div class="menu-box">
        <div class="flex column center align-center title">
            <span>飞鱼客栈</span>
        </div>
        <el-menu
            mode="vertical"
            background-color="#"
            text-color="#fff"
            router
            :default-openeds="opends"
            active-text-color="#0089BA"
            @select="select"
        >
            <MenuItem v-for="item in menuList" :value="item"/>
        </el-menu>
    </div>
</template>

<style scoped>
.menu-box {
    height: 100%;
    width: 250px;
    background: #253341;
}

:deep(.el-menu-item):hover {
    background-color: #354a5e;
}
:deep(.el-sub-menu__title):hover {
    background-color: #354a5e;
}
.title{
    width: 100%;
    height: 80px;
    color: white;
    font-family: "STXingkai", "STXinwei", "STKaiti", "STLiti", "Xingkai SC", "KaiTi", "Microsoft Yahei", "SimSun", serif;
    font-size: 30px;
}
</style>
